<template>
  <Dialog :title="t('mentorPickReviewScene.vote.title')" v-model="dialogVisible" :fullscreen="false" width="400px">
    <div class="mb-20px" style="color: var(--el-text-color-primary)">
      {{ t('mentorPickReviewScene.vote.tips', { name: mentor?.nickName }) }}
    </div>
    <div class="flex justify-center">
      <el-radio-group v-model="voteStatus">
        <el-radio :value="true" border>{{ t('mentorPickReviewScene.voteStatus.agree') }}</el-radio>
        <el-radio :value="false" border>{{ t('mentorPickReviewScene.voteStatus.disagree') }}</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <el-button @click="handleVote" type="primary" :disabled="loading">{{
        t('common.ok')
      }}</el-button>
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { MentorPickReviewApi, MentorPickReviewSceneVO } from '@/api/recruit/mentorPickReview'

defineOptions({ name: 'MentorPickReviewVote' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false)
const loading = ref(false)
const mentor = ref<MentorPickReviewSceneVO>()
const voteStatus = ref(true)

/** 打开弹窗 */
const open = async (info: MentorPickReviewSceneVO) => {
  reset()
  mentor.value = info
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const reset = () => {
  mentor.value = undefined
  voteStatus.value = true
}

const emits = defineEmits(['voted']) // 提供 emit 方法
// 投票
const handleVote = async () => {
  if (!mentor.value) {
    return
  }
  loading.value = true
  try {
    await MentorPickReviewApi.pickVote({
      batchId: mentor.value.batchId,
      detailId: mentor.value.detailId,
      vote: voteStatus.value
    })
    emits('voted')
    message.success(t('mentorPickReviewScene.vote.success'))
    dialogVisible.value = false
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss"></style>
